import React, { useCallback, useEffect, useState, useContext } from 'react';
import { getLsMealHistoryGetMealNoticeHi, getLsMealHistoryReleaseMealNotice, getLsMealHistoryRemoveMealNoticeHi, getLsMealHistoryCancelMealNoticeHi } from '../../api';
import AddGonggaoModule from './components/AddGonggaoModule';
import {myContext} from '../../../../reducer';
import {
    NoticeListAll
} from './style';
import { PageHeader, Button, message, Table, Space, Modal } from 'antd';
import { ExclamationCircleOutlined } from '@ant-design/icons';

const { confirm } = Modal;

/**
 * @description: 报餐发布公告列表
 * @author: xiaoxujs
 * @updata: xiaoxujs（2021-08-10）头部编写
 */

const NoticeList = () => {
    const {state} = useContext(myContext);
    const {tokenType} =state;
    const [addGonggaoModuleShow, setAddGonggaoModuleShow] = useState(false);
    const [listData, setListData] = useState([]); //列表
    const listFun = useCallback(
        () => {
            if(tokenType === 2) {
                ; (async () => {
                    const { code, msg, data } = await getLsMealHistoryGetMealNoticeHi();
                    if (code === '20000') {
                        setListData(data)
                    } else {
                        message.error(msg)
                    }
                })()
            }
                
        },
        [tokenType],
    )
    useEffect(() => {
        listFun()
    }, [listFun])
    const handleAddGonggao = () => {
        setAddGonggaoModuleShow(true)
    }
    //发布公告
    const handleRelease = id => {
        confirm({
            title: '确定要发布当前公告吗?',
            icon: <ExclamationCircleOutlined />,
            onOk() {
                ;(async () => {
                    const {code, msg} = await getLsMealHistoryReleaseMealNotice({id});
                    if(code === '20000') {
                        message.success('发布成功！')
                        listFun()
                    }else{
                        message.error(msg)
                    }
                })()
            }
          });
    }
    //删除公告
    const handleDelete = id => {
        confirm({
            title: '确定要删除当前公告吗?',
            icon: <ExclamationCircleOutlined />,
            onOk() {
                ;(async () => {
                    const {code, msg} = await getLsMealHistoryRemoveMealNoticeHi({id});
                    if(code === '20000') {
                        message.success('删除成功！')
                        listFun()
                    }else{
                        message.error(msg)
                    }
                })()
            }
          });
    }
    //取消公告
    const handleDeleteRelease = id => {
        confirm({
            title: '确定要取消当前log吗?',
            icon: <ExclamationCircleOutlined />,
            onOk() {
                ; (async () => {
                    const { code, msg } = await getLsMealHistoryCancelMealNoticeHi({ id });
                    if (code === '20000') {
                        message.success('取消成功！')
                        listFun()
                    } else {
                        message.error(msg)
                    }
                })()
            }
        });
    }
    const columns = [
        {
            title: '内容',
            dataIndex: 'value',

        },
        {
            title: '添加日期',
            dataIndex: 'createTime'
        },
        {
            title: '是否发布',
            dataIndex: 'isUse',
            render: (text) => <span>

                {
                    !text ? "是" : "否"
                }
            </span>
        },
        {
            title: '操作',
            render: (text, recode) => <Space>
                {
                    recode.isUse ? <>
                        <Button type='primary' onClick = {() => handleRelease(recode.id)}>发布</Button>
                        <Button type='primary' onClick = {() => handleDelete(recode.id)} danger>删除 </Button>
                    </> :<Button type='primary' onClick={() => handleDeleteRelease(recode.id)} danger>取消发布</Button>
                }
            </Space>
        },
    ];
    return <NoticeListAll>
        <PageHeader
            className="site-page-header"
            title="公告管理"
            extra={[
                <Button key="1" type="primary" onClick={() => handleAddGonggao()}>
                    添加公告
                </Button>,
            ]}
        />
        <Table dataSource={listData} columns={columns} rowKey='id' pagination = {false} />
        <AddGonggaoModule
            addGonggaoModuleShow={addGonggaoModuleShow}
            setAddGonggaoModuleShow={setAddGonggaoModuleShow}
            listFun= {listFun}
        />
    </NoticeListAll>
}

export default NoticeList